<template>
  <div class="oill_block">
    <div>
      <span
        :class="item <= mytempscore ? 'oil' : 'not_oil'"
        @mouseenter="handleMouseenter(item)"
        @mouseleave="handleMouseleave"
        @click="writeValue(item)"
        v-for="(item, index) in count"
        :key="index"
      ></span>
      <!-- <div class="oil_text">&lt;E {{text}} F&gt;</div> -->
      <div class="oil_text">E {{text}} F</div>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    props: 'value',
    event: 'input',
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    // 油的总个数
    count: {
      type: Number,
      default: 10,
    },
    // 油的个数
    value: {
      type: Number,
      default: 5,
    },
  },
  data () {
    return {
      myscore: 0,
      mytempscore: 0,
      text: '0%'
    }
  },
  watch: {
    value (val) {
      this.myscore = val;
      this.handleMouseleave('init');
    },
    myscore (val) {
      this.$emit('input', val, this.text)
    },
  },
  methods: {
    writeValue (item) {
      if (!this.disabled) {
        this.myscore = item
      }
    },
    handleMouseenter (item) {
      if (!this.disabled) {
        this.mytempscore = item
        this.text = `${((item) / this.count) * (100)}%`
      }
    },
    handleMouseleave (type = undefined) {
      if (type == 'init' || !this.disabled) {
        this.mytempscore = this.myscore
        this.text = `${((this.myscore) / this.count) * (100)}%`
      }
    },
  },
}
</script>
<style scoped lang="scss">
.oill_block {
  vertical-align: middle;
  line-height: 1;
  .oil,
  .not_oil {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    width: 20px;
    border-radius: 2px;
    background: #0090FF;
    margin: 0 1px;
  }
  .not_oil {
    background: #ccc;
  }
  .oil_text {
    text-align: justify;
    text-align-last: justify;
  }
}
</style>